<template>
  <div class="app-container">
    <!-- 条件栏 -->
    <div class="filter-wrapper">
      <NewPageFilter
        ref="pageFilter"
        v-model:query="filterInfo.query"
        :query-more-json="false"
        :filter-list="filterInfo.searchList"
        :filter-btn="filterInfo.searchBtn"
        :list-type-info="listTypeInfo"
      >
        <template v-slot:filter-fiscalPeriodStart>
          <el-input
            v-model="filterInfo.query.fiscalPeriodStart"
            class="not-mongolia"
            type="input"
            :required="true"
            :disabled="true"
            :placeholder="'请选择会计期间'"
            style="width: 180px"
          >
            <template #append>
              <el-icon @click="checkFiscalPeriodStart()"
                ><MoreFilled
              /></el-icon>
            </template>
          </el-input>
          ~
          <el-input
            v-model="filterInfo.query.fiscalPeriodEnd"
            class="not-mongolia"
            type="input"
            :required="true"
            :disabled="true"
            style="width: 180px"
            :placeholder="'请选择会计期间'"
          >
            <template #append>
              <el-icon @click="checkFiscalPeriodEnd()"><MoreFilled /></el-icon>
            </template>
          </el-input>
        </template>
      </NewPageFilter>
    </div>

    <div class="filter-wrapper">
      <NewPageFilter :filter-btn="filterInfo.btnList">
        <template v-slot:filter-excel>
          <el-button @click="exportExcel()">导出excel</el-button>
        </template>
        <template v-slot:filter-print>
          <el-button @click="print()">打印</el-button>
        </template>
      </NewPageFilter>
    </div>
    <!-- 表格 -->
    <TableContainer
      ref="deptUseSummaryTable"
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="tableInfo.api"
      :tab-index="true"
      :check-box="false"
      :summary="true"
      :summary-field-list="tableInfo.summaryFieldList"
      v-model:query="filterInfo.query"
      :field-list="tableInfo.fieldList"
      @pageInfo="pageInfo"
      @handleEvent="handleEvent"
    >
    </TableContainer>
    <PageDialog
      v-show="dialogInfo.visible"
      :title="dialogInfo.title"
      v-model:visible="dialogInfo.visible"
      :width="dialogInfo.width"
      :bt-loading="dialogInfo.btLoading"
      :bt-list="dialogInfo.btList"
    >
      <div class="asset-msg">
        <div class="asset-msg-label">
          <i class="el-icon-warning"></i>{{ dialogInfo.msg }}：
        </div>
        <el-radio-group v-model="dialogInfo.flag">
          <el-radio :label="true">当前页数据</el-radio>
          <el-radio :label="false">全部页数据</el-radio>
        </el-radio-group>
      </div>
    </PageDialog>
    <SelectFiscalPeriod
      v-if="selectFiscalPeriodInfo.startVisible"
      v-model:show-dialog="selectFiscalPeriodInfo.startVisible"
      :save-empty="true"
      :check-box="false"
      :highlight-row="true"
      :query="selectFiscalPeriodInfo.startQuery"
      @callback="callBackSelectFiscalPeriodStart"
    />
    <SelectFiscalPeriod
      v-if="selectFiscalPeriodInfo.endVisible"
      v-model:show-dialog="selectFiscalPeriodInfo.endVisible"
      :save-empty="true"
      :check-box="false"
      :highlight-row="true"
      :query="selectFiscalPeriodInfo.endQuery"
      @callback="callBackSelectFiscalPeriodEnd"
    />
  </div>
</template>

<script setup name="deptUseSummary">
import {
  getDeptUseDetailSummaryPage,
  exportDeptUseDetailSummary,
  printDeptUseDetailSummary,
} from '@/api/dataQuery.js'
import { fatchTemplateByCode } from '@/api/base'
import { getDeptAll } from '@/api/core'
import moment from 'moment'
const { proxy } = getCurrentInstance()
//导出提示相关配置
const dialogInfo = ref({
  visible: false,
  title: '提示',
  btLoading: false,
  type: '',
  msg: '',
  width: '400px',
  flag: true,
  btList: [
    { label: '关闭', event: handleClose, show: true },
    {
      label: '打印',
      type: 'primary',
      event: checkConfirm,
      show: true,
    },
  ],
})
const selectFiscalPeriodInfo = ref({
  startVisible: false,
  endVisible: false,
  startQuery: { fiscalType: 1, startDateEqAndLes: '' },
  endQuery: { fiscalType: 1, startDateEqAndGre: '' },
})
const filterInfo = ref({
  query: {
    keyword: '',
    storeDeptId: '',
    fiscalPeriodStart: '',
    fiscalPeriodEnd: '',
  },
  searchList: [
    {
      label: '操作时间',
      value: 'fiscalPeriodStart',
      slot: true,
    },
    {
      label: '入库部门',
      value: 'storeDeptId',
      componentType: 'slip-select',
      event: search,
      query: {
        deptAuth: 'id',
        status: 1,
      },
      api: getDeptAll,
    },
    {
      label: '库存类别',
      value: 'inventoryCategoriesValue',
      asValue: 'inventoryCategories',
      componentType: 'select-model',
      code: 'inventory_categories',
      hidden: true,
      event: search,
    },
    {
      label: '通用名称/编码/别名',
      value: 'keyword',
      componentType: 'input',
      event: search,
    },
  ],
  searchBtn: [{ type: 'button', label: '搜索', event: search }],
  btnList: [
    {
      type: 'slot',
      value: 'print',
      show: proxy.$permission('deptUseSummary:printDetail'),
    },
    {
      value: 'excel',
      type: 'slot',
      show: proxy.$permission('deptUseSummary:excelDetail'),
    },
  ],
})
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  api: undefined,
  selections: [],
  fieldList: [
    {
      label: '财务科目',
      value: 'financialAccountValue',
    },
    {
      label: '通用名称',
      value: 'commonName',
    },
    {
      label: '产品编码',
      value: 'productCode',
    },
    {
      label: '规格',
      value: 'standard',
    },
    {
      label: '厂家名称',
      value: 'brandName',
    },
    {
      label: '计量单位',
      value: 'unitName',
    },
    {
      label: '出入库数量',
      type: 'column',
      formatter: proxy.$fn.qtyFormatter,
      value: 'qty',
    },
    {
      label: '单价',
      type: 'column',
      value: 'price',
      show: proxy.$permission('deptUseSummary:price'),
      formatter: proxy.$fn.TripartiteMethod,
    },
    {
      label: '总金额',
      type: 'column',
      value: 'sumAmount',
      show: proxy.$permission('deptUseSummary:price'),
      formatter: proxy.$fn.TripartiteMethod,
    },
    {
      label: '批号',
      value: 'batchNumber',
    },
    {
      label: '生产日期',
      value: 'productionDate',
    },
    {
      label: '失效日期',
      value: 'validityDate',
    },
  ],
  summaryFieldList: [
    { value: 'qty', formatter: proxy.$fn.qtyFormatter },
    { value: 'applicationQty', formatter: proxy.$fn.qtyFormatter },
    { value: 'sumAmount', formatter: proxy.$fn.TripartiteMethod },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '100',
    btList: [],
  },
})
const page = ref({
  curPage: 1, // 当前页
  pageSize: 20, // 每页条数
})
function pageInfo(obj) {
  page.value = obj
}
function handleClose() {
  dialogInfo.value.visible = false
}
function checkFiscalPeriodStart() {
  selectFiscalPeriodInfo.value.startVisible = true
}
function checkFiscalPeriodEnd() {
  selectFiscalPeriodInfo.value.endVisible = true
}
function callBackSelectFiscalPeriodEnd(data) {
  if (data && data.id) {
    selectFiscalPeriodInfo.value.startQuery.startDateEqAndLes = data.startDate
    filterInfo.value.query.fiscalPeriodEnd = data.name
    filterInfo.value.query.fiscalPeriodStart = filterInfo.value.query
      .fiscalPeriodStart
      ? filterInfo.value.query.fiscalPeriodStart
      : data.name
  } else {
    filterInfo.value.query.fiscalPeriodEnd = ''
    selectFiscalPeriodInfo.value.startQuery.startDateEqAndLes = ''
  }
}
function callBackSelectFiscalPeriodStart(data) {
  if (data && data.id) {
    filterInfo.value.query.fiscalPeriodStart = data.name
    filterInfo.value.query.fiscalPeriodEnd = filterInfo.value.query
      .fiscalPeriodEnd
      ? filterInfo.value.query.fiscalPeriodEnd
      : data.name
    selectFiscalPeriodInfo.value.endQuery.startDateEqAndGre = data.startDate
  } else {
    filterInfo.value.query.fiscalPeriodStart = ''
    selectFiscalPeriodInfo.value.endQuery.startDateEqAndGre = ''
  }
}
async function getList() {
  tableInfo.value.api = getDeptUseDetailSummaryPage
  tableInfo.value.refresh = Math.random()
}
function search() {
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = [...data]
      break
  }
}
//导出excel
async function exportExcel() {
  dialogInfo.value.visible = true
  dialogInfo.value.type = 'excel'
  dialogInfo.value.msg = '请选择数据导出范围'
  dialogInfo.value.btList[1].label = '导出'
  dialogInfo.value.flag = true
}
function checkConfirm() {
  if (dialogInfo.value.type === 'excel') {
    exportExcelList()
  } else if (dialogInfo.value.type === 'print') {
    printList()
  }
  dialogInfo.value.visible = false
  dialogInfo.value.msg = ''
}
function exportExcelList() {
  let params = {
    ...filterInfo.value.query,
    ...page.value,
    page: dialogInfo.value.flag,
  }
  exportDeptUseDetailSummary(params).then((resp) => {
    if (resp) {
      proxy.$fn.parseExcel(resp)
    }
  })
}
async function print() {
  //打印
  dialogInfo.value.visible = true
  dialogInfo.value.type = 'print'
  dialogInfo.value.msg = '请选择当数据打印范围'
  dialogInfo.value.btList[1].label = '打印'
  dialogInfo.value.flag = true
}
function printList() {
  fatchTemplateByCode({
    resourceCode: 'deptUseSummary:printDetail',
    isDefault: 1,
  }).then((res) => {
    if (res && res.success) {
      let temp = proxy.$fn.getPrintTemp(res.data[0])
      getPrintData(temp, dialogInfo.value.flag)
    }
  })
}
function getPrintData(temp, flag) {
  let params = {
    ...filterInfo.value.query,
    ...page.value,
    page: flag,
  }
  printDeptUseDetailSummary(params).then((res) => {
    if (res.success && res) {
      let data = proxy.$fn.deepClone(res.data)
      let newData = data.map((item) => {
        return {
          ...item,
          ...item.orderInfo,
        }
      })
      proxy.$lodop.preview(
        temp,
        newData,
        !proxy.$permission('deptUseSummary:price')
      )
    }
  })
}

getList()

onUpdated(() => {
  // 数据加载完成后 重新渲染表格
  proxy.$nextTick(() => {
    proxy.$refs['deptUseSummaryTable'].$refs['table'].doLayout()
  })
})
</script>

<style scoped></style>
